<template>
  <div class="user-login">
    <div class="login-logo">
      <img src="../../static/images/icon/logo.png" alt="" />

      <span>盛心理智能平台</span>
    </div>

    <div class="text-group_3 flex-col justify-between">
      <div class="text-wrapper_1">
        <img src="../../static/images/hi.png" alt="" />
      </div>
      <span class="text_5">欢迎进入盛心理智能平台管理系统</span>
    </div>
    <div class="login">
      <!-- 登录切换 -->
      <div class="clearfix">
        <button
          class="clearfix-btn"
          :class="['show', loginType === 'account' ? 'active' : ' ']"
          @click="loginType = 'account'"
        >
          账号登录
        </button>
        <button
          class="clearfix-btn"
          :class="{ active: loginType === 'sms' }"
          @click="loginType = 'sms'"
        >
          短信登录
        </button>
        <div
          class="underline"
          :style="{ left: loginType === 'sms' ? '50%' : '0' }"
        ></div>
      </div>
      <!-- 账号登录 -->
      <t-form ref="form" v-model="formData" :colon="true" :label-width="0">
        <t-form-item
          class="form-item"
          v-if="loginType === 'account'"
          name="username"
        >
          <t-input
            v-model="formData.userName"
            clearable
            placeholder="请输入手机号/邮箱"
          >
            <template #prefix-icon>
              <img src="../../static/images/zhanghao.png" alt="" />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item
          v-if="loginType === 'account'"
          name="password"
          class="form-item"
        >
          <t-input
            v-model="formData.password"
            type="password"
            size=""
            clearable
            placeholder="请输入密码"
          >
            <template #prefix-icon>
              <img src="../../static/images/mima.png" alt="" /> </template
          ></t-input>
        </t-form-item>

        <!-- 短信登录 -->

        <t-form-item class="form-item" v-if="loginType === 'sms'" name="mobile">
          <t-input
            v-model="formData2.phone"
            clearable
            placeholder="请输入手机号码"
          >
            <template #prefix-icon>
              <img src="../../static/images/zhanghao.png" alt="" /> </template
          ></t-input>
        </t-form-item>
        <t-form-item
          class="form-item formitem"
          v-if="loginType === 'sms'"
          name="smsCode"
        >
          <div class="sms-code-container">
            <t-input
              v-model="formData2.code"
              clearable
              placeholder="请输入验证码"
            >
              <template #prefix-icon>
                <img src="../../static/images/mima.png" alt="" /> </template
            ></t-input>
            <t-button
              size="small"
              @click="sendSmsCode()"
              :disabled="smsCodeSending || smsCodeCountdown > 0"
              >{{ smsCodeButtonText }}</t-button
            >
          </div>
        </t-form-item>
        <!-- <t-checkbox
          v-if="loginType === 'account'"
          style="color: rgb(123, 140, 149)"
          >记住密码</t-checkbox
        > -->
        <t-form-item>
          <t-button
            class="tbutton"
            theme="primary"
            type="submit"
            block
            @click="Login()"
            >{{ loginButtonText }}</t-button
          >
        </t-form-item>
      </t-form>
    </div>
  </div>
</template>
<script>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { login, loginipone, logincode } from "../../api/login";
import { setToken } from "../../utils/setToken";
import axios from "axios";
import { MessagePlugin } from "tdesign-vue-next";
export default {
  setup() {
    const loginType = ref("account");
    const router = useRouter();
    const formData = reactive({
      userName: "",
      password: "",
    });
    const formData2 = reactive({
      phone: "",
      code: "",
    });
    const smsCodeSending = ref(false);
    const smsCodeCountdown = ref(0);
    const loginButtonText = computed(() =>
      loginType.value === "account" ? "登录" : "短信登录"
    );
    const smsCodeButtonText = computed(() => {
      if (smsCodeCountdown.value > 0) {
        return `${smsCodeCountdown.value}s后重发`;
      } else {
        return "获取验证码";
      }
    });

    const sendSmsCode = async () => {
      if (smsCodeSending.value || smsCodeCountdown.value > 0) {
        return;
      }

      smsCodeSending.value = true;
      smsCodeCountdown.value = 60;

      const countdownTimer = setInterval(() => {
        smsCodeCountdown.value--;

        if (smsCodeCountdown.value === 0) {
          clearInterval(countdownTimer);
          smsCodeSending.value = false;
        }
      }, 1000);
      MessagePlugin.success("短信发送成功");
      // 在这里执行发送验证码的逻辑
      const res = await logincode({ phone: formData2.phone });
      console.log(res);
    };
    let Login = async (form) => {
        MessagePlugin.loading("正在验证登录信息，请稍等~", 0);
      // setTimeout(() => {
      //   router.push("/home");
      // }, 1000);
      // MessagePlugin.error("登录成功");
      if (loginType.value === "account") {
        login(formData).then((res) => {
          console.log(res);
          if (res.code == 0) {
            setToken("token", res.token);
             MessagePlugin.closeAll();
            MessagePlugin.success("登录成功");
            router.push("/home");
          } else {
              MessagePlugin.closeAll();
            MessagePlugin.error({ content: "登录失败 " + res.msg });
          }
        });
      } else {
        const res = await loginipone(formData2);
        setToken("token", res.token);
         MessagePlugin.closeAll();
        MessagePlugin.success("登录成功");
        router.push("/home");
        console.log(res);
      }
    };
    return {
      formData,
      smsCodeSending,
      smsCodeCountdown,
      loginButtonText,
      smsCodeButtonText,
      loginType,
      formData2,
      Login,
      sendSmsCode,
    };
  },
};
</script>
<style lang="scss" scoped>
.user-login {
  width: 100%;
  height: 100%;
  background-image: url("../../static/images/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  .login-logo {
    font-size: 24px;
    height: 69px;
    width: 300px;
    display: flex;
    align-items: center;
    padding: 50px 0px 0px 50px;
    gap: 15px;

    img {
      width: 68px;
      height: 69px;
    }
  }

  .text-group_3 {
    position: absolute;
    width: 750px;
    height: 179px;
    top: 293px;
    left: 86px;

    .text-wrapper_1 {
      img {
        width: 261px;
        height: 68px;
      }
    }

    .text_5 {
      position: relative;
      font-size: 44px;
      font-weight: 500;
      color: rgb(0, 0, 37);
    }
  }

  .login {
    width: 520px;
    height: 551px;
    border-radius: 12px;
    box-shadow: 0px 10px 27px 2px rgba(203, 203, 203, 0.5);
    background-color: #fff;
    position: absolute;
    bottom: 112px;
    right: 75px;
    z-index: 999;

    .clearfix {
      line-height: 60px;
      font-size: 25px;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;

      .clearfix-btn {
        background-color: #fff;
        border: 0;
        width: 135px;
        height: 66px;
        font-size: 32px;
        color: rgb(125, 142, 151);
        font-weight: 500;
        margin: 50px;
      }

      .clearfix-btn:hover {
        color: rgb(0, 0, 37);
        border-bottom: rgb(151, 203, 231) 2px solid;
      }

      .active {
        color: rgb(0, 0, 37);
        border-bottom: rgb(151, 203, 231) 2px solid;
      }
    }

    .sms-code-container {
      display: flex;
      align-items: center;
      overflow: hidden;

      t-input .t-input {
        font-size: 20px;
      }

      .t-button {
        width: 260px;
        height: 72px;
        font-size: 20px;
      }
    }
  }

  :deep(.form-item) {
    height: 72px;
    margin: 35px 35px 10px 35px;

    .t-input {
      height: 72px;
      font-size: 20px;
      border-radius: 8px;
      padding: 24px;

      img {
        width: 24px;
        height: 26px;
      }
    }
  }

  .t-checkbox {
    margin: 4px 35px 0 35px;
  }

  .tbutton {
    margin: 50px 35px 0px 35px;
    height: 72px;
    width: 510px;
    border-radius: 8px;
    border: 0;
    background-color: rgb(117, 177, 247) !important;
    font-size: 24px;
  }

  .tbutton:hover {
    opacity: 0.8;
  }
}
</style>
